<template>
	<view class="resv-container" v-show="show">
		<view class="search">
			<u-search @search="handleSearch" @custom="handleSearch" bgColor="#fff" placeholder="请输入被访人姓名"
				:animation="true" :showAction="true" v-model="visitedName"></u-search>
		</view>
		<view class="addR">
			<view>新增预约</view>
			<view  id="addButton" @click.stop="gotoAdd" >
				<u-avatar icon="plus" size="30" fontSize="15" bg-color="#920076"></u-avatar>
			</view>
		</view>
		
		<view v-show="!showEmpty" class="list">
			<view class="item" v-for="(item,index) in list" :key="item.id">
				<view class="status">
					<view class="status-text" :class="showBgStatus(item.status)">{{showStatus(item.status)}}</view>
				</view>
				<view class="content">
					<view class="content-item">
						<view class="item-label">到访日期：</view>
						<view class="item-value">{{item.appointTime}}</view>
					</view>
					<view class="content-item">
						<view class="item-label">访客姓名：</view>
						<view class="item-value">{{item.appointName}}</view>
					</view>
					<view class="content-item">
						<view class="item-label">被访人姓名：</view>
						<view class="item-value">{{desensitizeVisitedName(item.visitedName)}}</view>
					</view>
						<!-- <view>访客姓名：{{item.appointName}}</view>
						<view>被访人姓名：{{item.visitedName}}</view> -->
					</view>
					<view class="func">
						<view class="title">
							<u-button color="#920076" @click="goToDetail(item.id)" icon="edit-pen" type="primary"
								:plain="true" :hairline="true" size="mini"
								:text="item.status === '0' ? '修改' : '详情'"></u-button>
						</view>
						<view class="title">
							<u-button color="#920076" type="primary" :disabled="item.status === '1'"
								@click="handleDelete(item.id,index)" :plain="true" :hairline="true" icon="trash"
								size="mini" text="删除"></u-button>
						</view>
					</view>
				</view>



			</view>
			<view v-show="showEmpty" class="empty">
				<u-empty icon="/static/empty.png" iconColor="#ccc" mode="data" text="暂无数据">
				</u-empty>
			</view>
			<!-- <view class="add" id="addButton" @click.stop="gotoAdd" @touchstart="handleStart"
				@touchmove.prevent="handleMove" @touchend="handleEnd">
				<u-avatar icon="plus" size="50" fontSize="34" bg-color="#920076"></u-avatar>
			</view> -->

			<u-loadmore v-show="!showEmpty" :status="status" lineColor="#ccc" :line="line" :loading-text="loadingText"
				:loadmore-text="loadmoreText" :nomore-text="nomoreText" />

			<view>
				<u-tabbar activeColor="#920076" :value="tabIndex" @change="onTabChange" :fixed="true"
					:placeholder="true">
					<u-tabbar-item text="我的预约" icon="account"></u-tabbar-item>
					<u-tabbar-item text="代客预约" icon="photo"></u-tabbar-item>
				</u-tabbar>
			</view>

			<u-notify ref="uNotify" :message="message"></u-notify>
		</view>

</template>

<script>
	import {
		desensitizeName
	} from "@/common/permission.js"
	export default {
		data() {
			return {
				show: false,
				message: '',
				pageNum: 1,
				pageSize: 10,
				total: null,
				list: [],

				line: true,
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '上拉加载更多',
				nomoreText: '我也是有底线的',

				tabIndex: 0,
				visitedName: "",
				showEmpty: true,
				startX: 0,
				startY: 0,
				currentX: 0,
				currentY: 0,
				isDragging: false,
				clickable: true
			}
		},
		mounted() {
			this.loadData()
		},
		methods: {
			desensitizeVisitedName(name){
				return desensitizeName(name)
			},
			init() {
				const element = document.getElementById("addButton")
				this.currentX = element.offsetLeft
				this.currentY = element.offsetTop
			},
			goToDetail(id) {
				uni.navigateTo({
					url: '/pages/reservation/reservationDetail?id=' + id
				})
			},
			handleDelete(id, index) {
				uni.showModal({
					title: '温馨提示',
					content: '确定要删除当前预约信息吗？',
					success: res => {
						if (res.confirm) {
							console.log('用户点击确定');
							// 在这里处理确认按钮的逻辑
							uni.showLoading()
							this.$request({
								url: '/appoint/delete?id=' + id
							}).then(() => {
								this.$refs.uNotify.show({
									top: 10,
									type: 'success',
									message: '删除成功',
									duration: 1000 * 1,
									safeAreaInsetTop: true
								})
								this.resetData()
								this.loadData()

							}).finally(uni.hideLoading())
						} else if (res.cancel) {
							console.log('用户点击取消');
							// 在这里处理取消按钮的逻辑
						}
					}
				})
			},
			showBgStatus(status) {
				if (status === '0') {
					return ''
				} else if (status === '1') {
					return 'success-1'
				} else if (status === '2') {
					return 'error-1'
				} else if (status === '3') {
					return 'success-2'
				} else if (status === '4') {
					return 'error-2'
				}
			},
			showStatus(status) {
				if (status === '0') {
					return '待审核'
				} else if (status === '1') {
					return '待核验'
				} else if (status === '2') {
					return '审核拒绝'
				} else if (status === '3') {
					return '核验通过'
				} else if (status === '4') {
					return '核验拒绝'
				}
			},
			resetData() {
				this.pageNum = 1
				this.pageSize = 10
				this.total = null
				this.list = []
			},
			handleSearch() {
				this.resetData()
				this.loadData()
			},
			loadData() {
				uni.showLoading()
				const openid = uni.getStorageSync("openid")
				this.$request({
					url: `/appoint/page?pageNum=${this.pageNum}&pageSize=${this.pageSize}&openid=${openid}&type=${this.tabIndex + 1}&visitedName=${this.visitedName}`
				}).then(res => {
					console.log("99999", res)
					this.total = res.total
					if (res.total === 0) {
						this.list = []
						this.showEmpty = true
					} else {
						console.log("999999999999==========")
						this.showEmpty = false
						this.list.push(...res.rows)

						console.log(this.pageNum, this.pageSize, this.list)
						if (this.pageNum * this.pageSize < this.total) {
							this.status = "loadmore"
						} else {
							this.status = "nomore"
							if (this.pageNum === 1) {
								this.line = false
								this.nomoreText = ''
							} else {
								this.line = true
								this.nomoreText = '我也是有底线的'
							}
						}

						console.log("status============", this.status)
					}
				}).finally(() => {
						uni.hideLoading()
						this.show = true
						setTimeout(() => {
							this.init()
						}, 100)
					}

				)
			},
			onTabChange(index) {
				console.log("index=======", index)
				this.resetData()
				this.tabIndex = index
				uni.setNavigationBarTitle({
					title: index === 0 ? '我的预约' : '代客预约'
				})
				this.loadData()

			},
			handleStart(e) {
				this.startX = e.touches[0].pageX;
				this.startY = e.touches[0].pageY;

			},
			handleMove(e) {
				this.isDragging = true;
				this.clickable = false;
				let deltaX = e.touches[0].pageX - this.startX;
				let deltaY = e.touches[0].pageY - this.startY;
				this.currentX += deltaX;
				this.currentY += deltaY;
				this.startX = e.touches[0].pageX;
				this.startY = e.touches[0].pageY;

				// 边界检查
				const windowWidth = uni.getSystemInfoSync().windowWidth;
				const windowHeight = uni.getSystemInfoSync().windowHeight;

				if (this.currentX < 0) {
					this.currentX = 0;
				} else if (this.currentX > windowWidth - 50) {
					this.currentX = windowWidth - 50
				} else if (this.currentY > windowHeight - 50) {
					this.currentY = windowHeight - 50;
				}

				const element = document.getElementById("addButton")

				if (element) {
					element.style.left = this.currentX + 'px';
					element.style.top = this.currentY + 'px';
				}

			},
			handleEnd() {
				// 可在此添加吸附边缘等逻辑 
				setTimeout(() => {
					this.clickable = true;
					this.isDragging = false;
				}, 100);
			},
			async gotoAdd() {
				console.log(this.clickable, this.isDragging)
				if (this.clickable && !this.isDragging) {
					if (this.tabIndex === 1) {
						// 代客预约
						//根据openid查询客户是否已经维护
						const openid = uni.getStorageSync("openid")
						uni.showLoading()
						let userInfo = await this.$request({
							url: '/appoint/getUserRole?openid=' + openid
						}).catch(() => {
							userInfo = null
						}).finally(uni.hideLoading())
						console.log(userInfo)
						if (!userInfo || !userInfo.data) {
							uni.showModal({
								title: '温馨提示',
								content: '当前员工信息未维护，请维护后再添加',
								showCancel: false,
								success:() => {
									console.log("维护员工信息")
									uni.navigateTo({
										url: '/pages/user/user'
									})
								}
							})
							return
						}

					}
					uni.navigateTo({
						url: '/pages/reservation/reservationAdd?tabIndex=' + this.tabIndex
					})
				}
			},
			onReachBottom() {
				if (this.pageNum * this.pageSize >= this.total) {
					//已加载完成
					// return 
					console.log(this.status)
				} else {
					this.status = "loading"
					this.pageNum++
					this.loadData()
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.input-placeholder {
		font-size: 12px;
	}

	.floating-button {
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		position: fixed;
		top: 100px;
		right: 100px;
		width: 100rpx;
		height: 100rpx;
		background: #920076;
		color: white;
		text-align: center;
		// line-height: 100rpx;
		border-radius: 50%;
		font-size: 80rpx;
	}
	
	.addR{
		// padding-right: 100rpx;
		background: #fff;
		gap: 20rpx;
		margin-top:20rpx;
		height: 72rpx;
		line-height: 72rpx;
		width: 91%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 28rpx;
		// border:1px solid red;
		padding-right: 3%;
	}

	.resv-container {
		overflow-x: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		min-height: 100vh;
		background: #f3f3f3;
		padding-bottom: 110rpx;

		.search {
			width: 94%;
			margin-top: 40rpx;
		}

		.list {
			margin-top: 20rpx;
			width: 94%;

			.item {
				background: #fff;
				width: 100%;
				display: flex;
				flex-direction: column;
				border-radius: 10rpx;
				margin-bottom: 20rpx;

				.status {
					display: flex;
					justify-content: flex-end;
					width: 100%;

					&-text {
						font-size: 26rpx;
						background: #e7c30c;
						width: 140rpx;
						text-align: center;
						color: #fff;
						border-radius: 6rpx;
					}

					.success-1 {
						background: lightgreen !important;
					}

					.error-1 {
						background: lightcoral !important;
					}

					.success-2 {
						background: #3cbfad !important;
					}

					.error-2 {
						background: red !important;
					}


				}

				.content {
					// font-size: 30rpx;
					padding-left: 32rpx;
					width: 100%;
					display: flex;
					flex-direction: column;
					gap: 20rpx;
					
					&-item{
						height: 50rpx;
						// border: 1px solid red;
						display: flex;
						align-items: center;
						.item-label{
							font-size: 32rpx;
						}
						.item-value{
							font-size: 30rpx;
						}
						
					}
				}

				.func {
					display: flex;
					justify-content: flex-end;
					margin: 30rpx 0;

					.title {
						font-size: 28rpx;
						width: 160rpx;
						margin-right: 30rpx;
						border-radius: 4rpx;
					}

				}
			}
		}

		.add {
			z-index: 9999;
			position: fixed;
			bottom: 150px;
			right: 30px;
			// background:#920076;
		}

		.empty {
			margin-top: 240rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>